.generator {
  .generator-form {
    padding: 1rem;

    .config-items {
      position: relative;
      margin: 0 -0.5rem;

      &.config-table {
        .config-item {
          width: auto;
          padding: 0.5rem;

          .config-item-body {
            text-align: center;

            .config-item-body-control-tool {
              top: 0 !important;
            }
          }
        }
      }

      &.config-input {
        .config-item {
          width: 49.99%;

          .config-item-body {
            .config-item-body-label {
              > label {
                height: auto !important;
              }
            }

            .config-item-body-control-tool {
              top: 0 !important;
            }
          }
        }
      }

      .config-item {
        display: inline-block;
        width: 24.99%;
        padding: 0.5rem 1rem;
        cursor: pointer;

        .config-item-body {
          display: flex;
          flex-flow: row wrap;
          padding: 0.5rem 1rem;
          background-color: #fff;
          border: 1px dashed hsl(var(--primary));
          border-radius: 2px;

          .config-item-body-label {
            display: inline-block;
            flex-grow: 0;
            width: 100px;
            overflow: hidden;
            text-align: right;
            white-space: nowrap;
            vertical-align: middle;

            > label {
              position: relative;
              display: inline-flex;
              align-items: center;
              max-width: 100%;
              height: 44px;
              font-size: 14px;
              color: rgb(0 0 0 / 85%);
              cursor: pointer;

              &::after {
                position: relative;
                top: -0.5px;
                margin: 0 8px 0 2px;
                content: ':';
              }
            }
          }

          .config-item-body-control {
            position: relative;
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            width: calc(100% - 100px);
            padding-right: 24px;

            .config-item-body-control-mark {
              position: absolute;
              top: -12px;
              left: -14px;

              .control-mark {
                display: inline-block;
                width: 8px;
                height: 8px;
                margin: 0 2px;
                border-radius: 50%;

                &.control-mark-1 {
                  background-color: #1890ff;
                }

                &.control-mark-2 {
                  background-color: #13c2c2;
                }
              }
            }

            .config-item-body-control-tool {
              position: absolute;
              top: 10px;
              right: -3px;

              .ant-btn {
                width: 18px;
                min-width: 18px;
                height: 18px;
                font-size: 11px;
              }
            }
          }
        }
      }
    }
  }

  .footer-button {
    padding: 1rem 4rem;
    text-align: right;
    border-top: 1px solid hsl(var(--border));
  }
}
